<!-- <script> {{{ -->
<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {Server} from '@/stores/ajax';
import {useRouter, useRoute} from 'vue-router'
import subareaCard from '@/components/bbs/subareaCard1.vue'
import {GetUserState} from '@/stores/userState';
import {format as timeFormat} from 'silly-datetime'
import postList from '@/components/bbs/postList4.vue'

import {
    ArrowLeft,
} from '@element-plus/icons-vue'
import {ServerUtils} from '@/serverUtils';
let user = GetUserState()
let route = useRoute()
let subareaid = Number(route.params['subareaid'])
let activeName = $ref("create_time")
let newPosts = $ref<any[]>([])
let loadedPage = 1
let loading = false

let loadAll = ref(false)
let handleClick = () => {
    nextTick(() => postListRef.refresh())
}
const postListRef = $ref<any>()
let subarea = ref<any>()
let refresh = async () => {
    await ServerUtils.getSubarea(subareaid).then(res => {
        subarea.value = res
    })
    // nextTick(() => postListRef.refresh())
}

const postCallback = async (page: number, posts_per_page: number) => {
    return ServerUtils.getTopics(['star'], 1, subareaid, activeName, page, posts_per_page)
}
// const load = async (page = loadedPage) => {
//     loadedPage = page
//     console.log(`Loadding page ${loadedPage}`)
//     if(page == 1){
//         newPosts = []
//     }
//     if (loading == true) return
//     loading = true
//     await ServerUtils.getTopics(['collect', 'star'],1, subareaid,activeName, page, 10
//     ).then(posts => {
//         if (posts) {
//             let lastCnt = newPosts.length
//             if (posts.list.length)
//                 loadedPage++
//             newPosts.push(...posts.list)
//             loading = false
//             if (lastCnt == newPosts.length) {
//                 loadAll.value = true
//             }
//         }
//     })
//     console.log(newPosts)
// }
refresh()
</script>
<!-- }}} -->

<template>

    <div class="fhs">
        <div class="fvs rhs-affix-area">
            <subareaCard :subarea="subarea"></subareaCard>
            <div class="rightside-block-2 card-block">
                <el-button class="b1" color="#fff0"
                    @click="$router.push({path: `/bbs/forums/publish/${subarea.id}`})">
                    <div class="fh b1-inner">
                        <img src="icon-keyboard.png"
                            class="icon">
                        发布主题
                    </div>
                </el-button>
            </div>
        </div>
        <div class="post-list-block card-block">
            <div class="top-line fhs">
                <el-button :icon="ArrowLeft" class="b1"
                    style="" color="#fff0"
                    @click="$router.go(-1)">
                    返回
                </el-button>
                <el-breadcrumb separator="/"
                    style="font-size: 14px;">
                    <el-breadcrumb-item class="bc"
                        :to="{path: '/bbs/forums'}">分区
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>主分区
                    </el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <el-tabs v-model="activeName"
                class="post-list-taps"
                @tab-click="handleClick">
                <el-tab-pane label="最新发布"
                    name="create_time">
                </el-tab-pane>
                <el-tab-pane label="最多阅读" name="views">
                </el-tab-pane>
                <el-tab-pane label="最新互动"
                    name="active_time">
                </el-tab-pane>
                <!-- <el-tab-pane label="其他内容" name="fourth"></el-tab-pane> -->
            </el-tabs>
            <postList ref='postListRef'
                :post-callback='postCallback'
                :show-subarea="false" />
        </div>
    </div>

</template>

<style scoped lang="scss">
.rhs-affix-area {
    order: 1;
    flex-basis: 200px;
    min-width: 240px;
}

.rightside-block-1 {
    background-color: white;
    padding: 16px 16px 20px;
    margin-bottom: 4px;

    .subarea-title {
        font-size: 20px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 4px;
    }

    .subarea-data {
        font-size: 14px;
        color: #999999;
        margin-bottom: 12px;

        .label1,
        .label2 {
            margin-right: 4px;
        }

        .topic-num {
            margin-right: 12px;
        }
    }

    .subarea-intro {
        font-size: 14px;
        color: #666666;
        line-height: 24px;
    }
}

.rightside-block-2 {
    background-color: white;
    /* padding: 16px 16px 20px; */

    .b1 {
        width: 100%;
        height: 54px;
    }

    .b1-inner {
        align-items: center;
        color: #666666;
        font-size: 16px;
    }

    .icon {
        width: 40px;
        margin-right: 4px;
    }
}

.post-list-block {
    background-color: white;
    flex-grow: 1;
    margin-right: 4px;
    padding: 16px 30px 30px;
    min-width: 660px;

    .top-line {
        align-items: center;

        .b1 {
            border-width: 0;
            justify-content: start;
            color: #999;
            padding: 0;
            margin-right: 20px;
        }

        .b1:hover {
            color: #666;
            background-color: #fff0;
        }

        .b1:active {
            color: #ccc;
            background-color: #fff0;
        }

        .bc:hover {
            color: #444;
        }

    }


    .post-item {
        margin-bottom: 12px;

        .subarea-label {
            color: #999999;
            font-size: 14px;
            margin-bottom: 2px;
        }

        .post-title {
            font-size: 20px;
            color: #222;
            margin-bottom: 4px;
        }

        .post-abstract {
            font-size: 16px;
            color: #666666;
            margin-bottom: 10px;
        }

        .post-pic-area {
            gap: 16px;
            margin-bottom: 8px;

            .post-pic {
                width: 180px;
                height: 100px;
                object-fit: cover;

            }
        }

        .lastline {
            font-size: 14px;
            line-height: 20px;
            color: #999999;
            align-items: center;
            margin-bottom: 8px;

            .author-avatar {
                margin-right: 4px;
            }

            .author-name {
                margin-right: 15px;
            }

            .icon-time {
                width: 18px;
                height: 18px;
                margin-right: 2px;
            }

            .publish-time {
                margin-right: 16px;
            }

            .view-num {
                margin-right: 16px;
            }

            .icon-view {
                width: 18px;
                height: 18px;
                filter: opacity(0.6);
                margin-right: 2px;
            }

            .icon-remark {
                width: 14px;
                height: 14px;
                filter: opacity(0.7);
                margin-right: 2px;
            }

        }

        .div-line {
            width: 80%;
            border-top: 1px solid #0003;
        }
    }

}
</style>
<style lang="scss">
.post-list-taps {
    /* font-size: 16px; */
    font-weight: bold;

    .el-tabs__active-bar {
        height: 4px;
        width: 50px !important;
        margin-left: 15px;
        background-color: var(--main-color);
    }

    .el-tabs__nav {
        /* transform: scale(1.5); */
        padding: 4px 0 12px;
    }

    .el-tabs__item {
        font-size: 20px;
    }


}
</style>
